<template>
  <div>
    <!-- <div class="col" v-if="this.addform==2">
      <q-chip square class="no-border-radius q-ml-none q-mr-none border-grey-3" color="light-blue" text-color="white">
        预生成编码:
      </q-chip>
      <q-chip square class="no-border-radius q-ml-none q-mr-none">
        QEWEBWO123456789
      </q-chip>
    </div> -->
    <div class="row q-col-gutter-sm">
      <div class="col-3">
        <div :class="$v.addOrEditForm.name.$error?'text-negative': ''">名称：</div>
        <q-input
          :disable="disable"
          v-model="addOrEditForm.name"
          error-message="该字段为必填项"
          :error="$v.addOrEditForm.name.$error"
          @blur="$v.addOrEditForm.name.$touch"
          dense hint/>
      </div>
      <div class="col-3">
        <div>英文名称:</div>
        <q-input
          :disable="disable"
          v-model="addOrEditForm.nameEn"
          dense hint/>
      </div>
      <div class="col-3">
        <div :class="$v.addOrEditForm.code.$error?'text-negative': ''">编码:</div>
        <q-input
          :disable="disable"
          error-message="该字段为必填项"
          :error="$v.addOrEditForm.code.$error"
          @blur="$v.addOrEditForm.code.$touch"
          v-model="addOrEditForm.code"
          dense hint/>
      </div>
      <div class="col-3">
        <div :class="$v.addOrEditForm.prefix.$error?'text-negative': ''">前缀：</div>
        <q-input
          :disable="disable"
          v-model="addOrEditForm.prefix"
          :error-message="$v.addOrEditForm.prefix.required ?'请正确填写信息':'该字段为必填项'"
          :error="$v.addOrEditForm.prefix.$error"
          @blur="$v.addOrEditForm.prefix.$touch"
          dense hint/>
      </div>
      <div class="col-3">
        <div>后缀：</div>
        <q-input
          :disable="disable"
          v-model="addOrEditForm.suffix"
          dense hint/>
      </div>
      <div class="col-3">
        <div :class="$v.addOrEditForm.minValue.$error?'text-negative': ''">最小值：</div>
        <q-input
          :disable="disable"
          type="number"
          v-model="addOrEditForm.minValue"
          :error-message="$v.addOrEditForm.minValue.required?'请填写正整数':'该字段为必填项'"
          :error="$v.addOrEditForm.minValue.$error"
          @blur="$v.addOrEditForm.minValue.$touch"
          dense hint/>
      </div>
      <div class="col-3">
        <div :class="$v.addOrEditForm.startValue.$error?'text-negative': ''">起始值：</div>
        <q-input
          :disable="disable"
          type="number"
          :error="$v.addOrEditForm.startValue.$error"
          @blur="$v.addOrEditForm.startValue.$touch"
          error-message="请填写正整数"
          v-model="addOrEditForm.startValue"
          dense hint/>
      </div>
      <div class="col-3">
      <div :class="$v.addOrEditForm.maxValue.$error?'text-negative': ''">最大值：</div>
        <q-input
          :disable="disable"
          type="number"
          v-model="addOrEditForm.maxValue"
          :error-message="$v.addOrEditForm.minValue.required?($v.addOrEditForm.minValue.max?'最大值要大于最小值':'请填写正整数'):'该字段为必填项'"
          :error="$v.addOrEditForm.maxValue.$error"
          @blur="$v.addOrEditForm.maxValue.$touch"
          dense hint/>
      </div>
      <div class="col-3">
        <div>递增值：</div>
        <q-input
          :disable="disable"
          v-model="addOrEditForm.incValue"
          dense hint/>
      </div>
      <!-- <div class="col-3">
        <div :class="$v.addOrEditForm.digit.$error?'text-negative': ''">位数</div>
        <q-input
          type="number"
          error-message="该字段为必填项"
          :error="$v.addOrEditForm.digit.$error"
          @blur="$v.addOrEditForm.digit.$touch"
          v-model="addOrEditForm.digit"
          dense hint/>
      </div> -->
      <div class="col-3">
        <div>是否包含时间：</div>
        <q-select
        :disable="disable"
        emit-value
        map-options
        dense
        v-model="addOrEditForm.includeTime"
        :options="typeOption" />
      </div>
      <div class="col-3" v-if="addOrEditForm.includeTime==1">
        <div>时间格式：</div>
        <q-select
        :disable="disable"
        emit-value
        map-options
        dense
        v-model="addOrEditForm.timeFmt"
        :options="timeOption" />
      </div>
      <div class="col-12">
        <div>说明：</div>
        <q-input
          :disable="disable"
          type="textarea"
          v-model="addOrEditForm.remark"
          dense hint/>
      </div>
    </div>
    <div align="right" style="margin-bottom:10px;">
      <q-btn label="保存" v-show="disable==false"  size="sm" color="light-blue" @click="saveHandler"  style="margin-right:20px"/>
      <q-btn label="修改" v-show="disable==true"  size="sm" color="light-blue" @click="disable=false"   style="margin-right:20px"/>
      <q-btn label="取消" v-show="disable==false"  size="sm" color="light-blue" @click="disable=true"/>
    </div>
  </div>
</template>

<script>
import { plusInteger } from 'src/utils/my.validators.js'
import { required } from 'vuelidate/lib/validators'
var max = function (value) {
  return plusInteger(value)
}
export default {
  name: 'projectTeamList',
  props: {
    typeCode: {
    }
  },
  data () {
    return {
      addform: 1,
      disable: true,
      // 新增
      addOrEditForm: {
        id: '',
        typeCode: this.typeCode,
        name: '',
        nameEn: '',
        code: '',
        prefix: '',
        suffix: '',
        minValue: '1',
        startValue: '1',
        maxValue: '99999999',
        incValue: '1',
        // digit: '',
        includeTime: 0,
        timeFmt: '',
        remark: ''
      },
      typeOption: [
        {
          label: '是',
          value: 1
        },
        {
          label: '否',
          value: 0
        }
      ],
      timeOption: [
        {
          label: 'yyyyMMdd',
          value: 'yyyyMMddHHmm'
        },
        {
          label: 'yyyyMMddHHmm',
          value: 'yyyyMMddHHmm'
        }
      ]
    }
  },
  computed: {
  },
  validations: {
    addOrEditForm: {
      code: { required },
      name: { required },
      prefix: { required },
      minValue: {
        required,
        max,
        new (val) {
          return Number(this.addOrEditForm.maxValue) > Number(this.addOrEditForm.minValue)
        }
      },
      startValue: {
        max
      },
      // digit: { max },
      incValue: { max },
      maxValue: {
        required,
        max,
        new (val) {
          return Number(this.addOrEditForm.maxValue) > Number(this.addOrEditForm.minValue)
        }
      }
    }
  },
  watch: {
  },
  mounted () {
    this.listGet()
  },
  methods: {
    async saveHandler () {
      console.log(this.addOrEditForm)
      // console.log(this.addOrEditForm.timeFmt)
      if (this.addOrEditForm.includeTime === 0) {
        this.addOrEditForm.timeFmt = ''
      }
      console.log(this.addOrEditForm.timeFmt)
      this.$v.addOrEditForm.$touch()
      if (!this.$v.addOrEditForm.$error) {
        this.loadingSave = true
        await this.$api({
          method: 'put',
          url: this.addform === 1 ? '/common/serial/add' : '/common/serial/updateSerial',
          params: this.addOrEditForm,
          emulateJSON: true,
          useNotify: true,
          useLoadLayer: true,
          successCallback: ({ data }) => {
            this.addOrEditDialog = false
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
        this.loadingSave = false
        this.listGet()
      } else {
        this.errorCopy = true
      }
    },
    async listGet (props) {
      await this.$api({
        method: 'get',
        url: `/common/serial/getActiveSerialByTypeCode/${this.typeCode}`,
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          console.log(data)
          this.addOrEditForm = {
            id: data[0].id,
            typeCode: this.typeCode,
            name: data[0].name,
            nameEn: data[0].nameEn,
            code: data[0].code,
            prefix: data[0].prefix,
            suffix: data[0].suffix,
            minValue: data[0].minValue,
            startValue: data[0].startValue,
            maxValue: data[0].maxValue,
            incValue: data[0].incValue,
            // digit: '',
            includeTime: data[0].includeTime,
            timeFmt: data[0].timeFmt,
            remark: data[0].remark
          }
          this.addform = 2
          this.getCode()
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    async getCode () {
      let data = {
        typeCode: this.typeCode
      }
      await this.$api({
        method: 'post',
        url: '/common/serial/generate',
        params: data,
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          console.log(data)
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
